<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";

const Login = defineAsyncComponent(
  () => import("@/views/sys/Login/components/login.vue")
);
const Reg = defineAsyncComponent(
  () => import("@/views/sys/Login/components/reg.vue")
);

const componentKey: any = ref(Login);

const clicReg = () => {
  componentKey.value = Reg;
};
const handleLogin = () => {
  componentKey.value = Login;
};
</script>
<template>
  <div class="h-full layout-container">
    <div class="layout-warp flex items-center flex-col pt-30">
      <div class="layout-header flex items-center">
        <img class="layout-logo-img mr-5" src="@/assets/logo.png" />
        <span class="text-xl">云涵中后台管理系统</span>
      </div>
      <div class="layout-header mt-10">
        <component :is="componentKey" @reg="clicReg" @Login="handleLogin" />
      </div>
    </div>
    <div class="layout-footer absolute bottom-2 text-center w-full">
      <div class="flex justify-center mb-2">
        <a class="w-20 cursor-pointer">帮助</a>
        <a class="w-20 cursor-pointer">隐私</a>
        <a class="w-20 cursor-pointer">条款</a>
      </div>
      <div>Copyright © 2023 云涵科技</div>
    </div>
  </div>
</template>
<style scoped lang="less">
.layout-container {
  width: 100%;
  min-height: 100%;
  background-image: url(@/assets/sys/background-d7103c44.svg);
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
}
.layout-warp {
  height: 70%;
}
.layout-logo-img {
  width: 44px;
}
/deep/
  .css-dev-only-do-not-override-1qb1s0s.ant-tabs-top
  > .ant-tabs-nav::before {
  border: 0;
}
</style>
